<template>
  <div class="app-container">
    <YxhyTableQuery
      ref="yxhyTableQueryRef"
      :query-params.sync="queryParams"
      :query-columns="queryColumns"
      @search="handleQuery"
    >
      <el-form-item slot="button">
        <el-button v-hasPermi="['order:supplementVip:add']" type="success" @click="handleAdd">添加</el-button>
      </el-form-item>
    </YxhyTableQuery>

    <YxhyTableData
      :columns="columns"
      :data="tableList"
      :loading="loading"
    />

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="init"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户ID" prop="user_id">
          <el-input v-model="form.user_id" type="number" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="类型" prop="gift_type">
          <el-radio-group v-model="form.gift_type">
            <el-radio :label="1">赠送会员</el-radio>
            <el-radio :label="2">清除会员</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.gift_type == 1">
          <el-form-item label="会员天数" prop="vip">
            <div class="flex ai-center">
              <el-input v-model="form.vip" type="number" placeholder="请输入会员天数" style="width: 50%" />
              <p class="font-color ml-10">天</p>
            </div>
          </el-form-item>
        </template>
        <el-form-item label="原因" prop="reason">
          <el-input v-model="form.reason" type="textarea" placeholder="请输入原因" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { columnsStatic, TYPE_TEXT } from './Ds.js'
import { orderGiftVipAdd, orderGiftVipList } from '@/api/order/orderData'

export default {
  name: 'SupplementVipList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        user_id_search: undefined
      },
      // 查询表单
      queryColumns: [
        {
          label: '',
          placeholder: '请输入用户ID',
          type: 'input',
          param: 'user_id_search'
        }
      ],
      loading: false,
      // 表格列
      columns: columnsStatic,

      title: undefined,
      open: false,
      form: {
        user_id: undefined,
        gift_type: undefined, // 1=赠送 2=扣除
        vip: undefined,
        reason: undefined
      },
      rules: {
        user_id: [
          { required: true, message: '请输入用户ID', trigger: ['blur', 'change'] }
        ],
        gift_type: [
          { required: true, message: '请选择类型', trigger: ['blur', 'change'] }
        ],
        vip: [
          { required: true, message: '请输入会员天数', trigger: ['blur', 'change'] }
        ],
        reason: [
          { required: true, message: '请输入原因', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  async created() {
    await this.init()
  },
  methods: {
    // 表格数据源
    async init() {
      this.loading = true
      const res = await orderGiftVipList({
        ...this.queryPage,
        ...this.queryParams
      })
      res.data.forEach(e => {
        const { type, name, vip } = e
        e.type_text = TYPE_TEXT[type]
        e.vip_text = vip == 0 ? '-' : `${Number(vip)}天`
        e.name = name || '-'
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.init()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.$refs.yxhyTableQueryRef.onEmpty()
    },

    // 表单重置
    reset() {
      this.form = {
        user_id: undefined,
        gift_type: undefined, // 1=赠送 2=扣除
        vip: undefined,
        reason: undefined
      }
      this.resetForm('formRef')
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加用户补会员'
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          orderGiftVipAdd(this.form).then(res => {
            this.$modal.msgSuccess('添加成功')
            this.open = false
            this.init()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
